<!-- 开票子组件 -->
<template>
  <div class>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules" class="ticketForm">
      <el-form-item label="批次号" required>
        <el-input v-model="form.batch_number" readonly></el-input>
      </el-form-item>
      <el-form-item label="发票号" required prop="invoice_number" v-if="!reUpload">
        <el-input v-model.trim="form.invoice_number"></el-input>
      </el-form-item>
      <el-form-item label="发票上传" required prop="invoice_url">
        <!-- <el-input v-model="form.invoice_url"></el-input> -->
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :on-success="handleAvatarSuccess"
          :on-remove="handleRemove"
          :file-list="fileList"
          :limit="1"
          :on-exceed="handleExceed"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>

      <div class="btn-box">
        <el-button type="primary" @click="Invoicing">申请开票</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { Invoicing, updateInvoicesUrl } from "@/api/businessUser/moneyManagment";
import { uploadUrl } from "@/utils/tool";
export default {
  props: ["row", "reUpload"],
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      form: {
        batch_number: "",
        invoice_number: "",
        invoice_url: ""
      },
      rules: {
        invoice_number: [
          { required: true, message: "请输入发票号", trigger: "blur" }
        ],
        invoice_url: [
          { required: true, message: "请上传发票文件", trigger: "blur" }
        ]
      },
      fileList: [],
      uploadUrl
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // 'form.invoice_number': {
    //     handler(newV) {
    //         // console.log(newV);
    //     }
    // }
  },
  //方法集合
  methods: {
    async Invoicing() {
      if (this.reUpload) {
        //重新开票
        if (!this.form.invoice_url) {
          this.$message.error("请上传发票文件");
          return;
        }
        let res = await updateInvoicesUrl({
            id:this.row.id,
            url:this.form.invoice_url
        });
        if (res.code == 200) {
          this.$message.success(res.msg);
        }
        this.$emit("closeDialog");
      } else {
        //开票
        this.$refs["form"].validate(async valid => {
          if (valid) {
            let res = await Invoicing(this.form);
            if (res.code == 200) {
              this.$message.success(res.msg);
            }
            this.$emit("closeDialog");
          } else {
            this.$message.error("请填写开票信息");
          }
        });
      }
    },
    handleAvatarSuccess(res, file) {
      if (res.code === 200) {
        this.form.invoice_url = res.data.url;
      }
    },
    handleRemove(file, fileList) {
      this.form.invoice_url = "";
    },
    handleExceed(files, fileList) {
      this.$message.error(`最多只能上传一个文件`);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
    this.form.batch_number = this.row.batch_number;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.ticketForm {
  margin: 0 25%;
}

.btn-box {
  display: flex;
  justify-content: center;
}
</style>